<template>
	<div>				
	  <div class='header'>
         <img src="../../../../static/img/b.jpg" class="blur"/>
         <div class="wrap">
         	<div style="margin-bottom: 15px;display: flex;justify-content: space-between;">
         		<van-icon name="arrow-left" color="#fff" size="20" @click="onClickLeft"/>
         		<div style="display: flex;">
         			<img src="../../../../static/img/lanhu/08.png" alt=""  @click="showCodeMask"
         				style="width: 19px;height: 19px;display: block;margin-right: 10px;"/>
         			<van-icon name="ellipsis" color="#fff" size="20" @click="more"/>
         		</div>
         	</div>
         	
         	<div class="wrap1">
         		<div class="a">
         			<img src="../../../../static/img/b.jpg" alt="" class="wrap1Img"/>
         		</div>
         		<div class="b">
         			<div class="b1">梦红颜随风潜入也</div>
         			<div class="b2" style="margin-bottom: 9px;">昵称: 9亿少女的梦</div>
         			<div class="b2">37分钟前来过集市</div>
         		</div>
         		<div class="c">        			
         			<img src="../../../../static/img/lanhu/07.png" alt="" style="width: 50px;height: 25px;"/>
         		</div>
         	</div>
         	
         	<div>
         		<span style="color: #fff;margin-right: 20px;">1 关注</span>
         		<span style="color: #fff;margin-right: 20px;">1 粉丝</span>
         		<span style="color: #fff;">1 点赞</span>
         	</div>
         </div>
      </div>
      <div>
		<van-tabs v-model="activeName" color="#FFD630">
		  <van-tab title="TA的 36" name="a">
		  	  <div class="ta">
		  	  	 <div class="taSection" v-for="item in 9">
		  	  	 	<img src="../../../../static/img/2.jpg" alt="" />
		  	  	 	<div class="title">森林小熊 卫衣3件套全新森林小熊 卫衣3件套全新</div>
		  	  	 	<div class="info">
		  	  	 		<span style="color: #FF3B30;">&yen;<span style="margin-left: 4px;color: #FF3B30;">115</span></span>
		  	  	 		<span style="color: #999;">28人想要</span>
		  	  	 	</div>
		  	  	 </div>
		  	  </div>
		  </van-tab>
		  <van-tab title="评价 46" name="b">
		  	<div class="pj">
		  		<div>
		  			<span class="pj_tag active">全部8</span>
		  			<span class="pj_tag">好评8</span>
		  			<span class="pj_tag">有图0</span>
		  		</div>
		  		
		  		<div class="pj_ul">
			  		<div class="pj_li" v-for="item in 3">
			  			<div>
			  				<img src="../../../../static/img/timg.jpg" alt="" class="pj_people"/>
			  			</div>			  			
			  			<div class="right">
			  				<div>
			  					<div style="color: #999;">来自无锡市的买家</div>
			  					<div style="margin: 5px 0;">相片真实,衣服很好</div>
			  					<div style="color: #999;">2020-03-24</div>
			  				</div>
			  				<div>
			  					<img src="../../../../static/img/lanhu/09.png" alt=""/>
			  				</div>
			  			</div>
			  		</div>
			  		<div class="pj_li" v-for="item in 3">
			  			<div>
			  				<img src="../../../../static/img/timg.jpg" alt="" class="pj_people"/>
			  			</div>			  			
			  			<div class="right">
			  				<div>
			  					<div style="color: #999;">来自无锡市的买家</div>
			  					<div style="margin: 5px 0;">相片真实,衣服很好</div>
			  					<div style="color: #999;">2020-03-24</div>
			  				</div>
			  				<div>
			  					<img src="../../../../static/img/lanhu/17.png" alt=""/>
			  				</div>
			  			</div>
			  		</div>			  		
		  		</div>	  		
		  	</div>
		  </van-tab>
		</van-tabs>      
      </div>
      
      
	  <van-popup
		  v-model="showCode"
		  position="bottom"
		  :duration='0'
		  :style="{ height: '100%',width:'100%'}"
	  >
	     <div class="mask">
	     	<div class="cancleIcon">
	     		<img src="../../../../static/img/lanhu/13.png" alt="" 
	     			style="width: 20px;height: 20px;border:1px dashed #fff" @click="showCode=false"/>
	     	</div>
	     	<div class="code">
	     		<div class="container">
	     			<div style="padding: 50px 0 25px;text-align: center;">
	     				<img src="../../../../static/img/lanhu/18.png" alt="" style="width: 50%;"/>
	     			</div>
	     			<div id="qrcode" ref="qrcode" style="display: flex;justify-content: center;"></div>
	     			<div style="margin-top: 25px;display: flex;justify-content: center;">
	     				<img src="../../../../static/img/b.jpg" alt="" style="width: 50px;height: 50px;display: block;border-radius: 2px;"/>
	     			</div>
	     			<div style="padding: 10px 0 65px;text-align: center;font-size: 16px;">9亿少女的梦</div>
	     		</div>
	     	</div>
	     	
	     	<div class="shareWrap">
	     		<div class="left">
	     			<div style="width: 48px;height: 48px;display: flex;justify-content: center;">
		     			<img src="../../../../static/img/lanhu/12.png" alt="" style="width: 42px;height: 42px;"/>
	     			</div>
	     			<span style="color: #fff;margin-top: 5px;opacity: 0.8;">保存图片</span>
	     		</div>
	     		<div class="right">
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/15.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">微信</span>
	     			</div>
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/10.png" alt="" />
	     				<span style="color: #fff;margin-top: 9px;opacity: 0.8;text-align: center;">QQ</span>
	     			</div>
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/11.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">QQ空间</span>
	     			</div>
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/14.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;">微博</span>
	     			</div>
	     			<div class="section">
	     				<img src="../../../../static/img/lanhu/16.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;">支付宝</span>
	     			</div>    			
	     		</div>
	     	</div>
	     	<div class="footer" @click="showCode=false">取消</div>
	     </div>
	  </van-popup>
	  
	  
	  <van-popup
	  	  id="more"
		  v-model="showMore"		  
		  position="bottom"
	  >	
	    <div class="moreShareWrap">
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/15.png" alt="" class="img"/>
 				<span class="word">微信</span>
	    	</div>
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/10.png" alt="" class="img"/>
 				<span class="word" style="margin-top: 10px;">QQ</span>
	    	</div>
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/11.png" alt="" class="img"/>
 				<span class="word">QQ空间</span>
	    	</div>
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/14.png" alt="" class="img"/>
 				<span class="word">微博</span>
	    	</div>
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/16.png" alt="" class="img"/>
 				<span class="word">支付宝</span>
	    	</div>	    	
	    </div>
	    
	    <div class="moreShareWrap">
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/21.png" alt="" class="img"/>
 				<span class="word">口令</span>
	    	</div>
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/20.png" alt="" class="img"/>
 				<span class="word">复制</span>
	    	</div>
	    	<div class="item">
 				<img src="../../../../static/img/lanhu/19.png" alt="" class="img"/>
 				<span class="word">二维码</span>
	    	</div>	    	
	    </div>	  
	    <div class="cancle" @click="showMore=false">取消</div>
	  </van-popup>

	</div>	
</template>

<script>
import QRCode  from "qrcodejs2"	
import areaList from '@/api/area.js'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	name:'myInfo',
	data() {
       return {
          activeName:'a',
          showCode:false, // 显示二维码弹框
          linkUrl: 'http://192.168.10.208:8080/market/center/homepage?t=1586328876103',// 二维码地址
          isFirst:true,  // 判断是否第一次显示二维码
          showMore:false
       }
	},
	components: { QRCode },
	methods: {
		showCodeMask(){
			this.showCode=true
			if(this.isFirst){
			    this.$nextTick (function () {
			       this.qrcode();
			    })
			    this.isFirst=false
			}
	
		},
        qrcode () {
            let that = this;
            let qrcode = new QRCode('qrcode', {
                width: 150,
                height: 150,        // 高度
                text:this.linkUrl
            })
        },
        more(){
        	this.showMore=true
        }
	},
	mixins:[publicFun],//混入		
	mounted() {
    
	}
}	
</script>

<style scoped lang="scss">   
*{box-sizing: border-box;}
.header{width: 100%;height: 170px;position: relative;overflow:hidden}
.blur {    
 width: 100%;
 height: 100%;	
 -webkit-filter: blur(40px); 
 -moz-filter: blur(40px);
 -ms-filter: blur(40px);    
 filter: blur(40px); 
}
.wrap{position: absolute;width: 100%;top: 0;z-index: 100;padding: 20px 20px 10px 15px;}
.wrap1{display: flex;width: 100%;margin-bottom: 10px;
    .c{width: 50px;padding-top: 3px;}
	.b{margin-left: 10px;flex: 1;
		.b1{
			font-size: 17px;color: #fff;margin-bottom:9px;
		}
		.b2{font-size: 12px;color: #fff;}
	}
}
.wrap1Img{width: 70px;height: 70px;border-radius: 8px;}
.ta{display: flex;flex-wrap: wrap;padding: 15px;}
.taSection{width: 32%;margin-right: 2%;margin-bottom: 2%;padding: 5px;
	img{width: 100%;display: block;height: 100px;}
	.title{margin-top: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
	.info{display: flex;justify-content: space-between;margin-top: 10px;}
}
.taSection:nth-child(3n){margin-right: 0;}
.pj{padding: 15px;}
.pj_tag{color: #999;border:1px solid #999;padding: 6px 14px;border-radius: 20px;margin-right: 10px;}
.pj_tag.active{background: #FFD630;border:1px solid #FFD630;color: #333;}
.pj_people{width: 54px;height: 54px;border-radius: 4px;}
.pj_li{padding: 30px 0 0px;display: flex;
	.right{margin-left: 14px;flex: 1;padding-bottom: 15px;display: flex;
	border-bottom: 1px solid #e5e5e5;justify-content: space-between;
	   img{display: block;width: 18px;height: 18px;}
	}
}
.mask{background: #000;width: 100%;min-height: 100%;
	.footer{background: #fff;width: 100%;padding: 12px 0;font-size: 16px;text-align: center;margin-top: 18px;}
}
.cancleIcon{padding: 32px 25px 0;}
.code{padding: 32px 25px 0;.container{background: #fff;}}
.shareWrap{padding: 0 15px;margin-top: 30px;display: flex;
    .left{display: flex;flex-direction: column;padding-right: 24px;border-right: 1px solid rgba(255,255,255,0.7);}
    .right{display: flex;
    	.section{display: flex;flex-direction: column;text-align:center;margin-left: 10px;
    	   img{width: 45px;height: 45px;display: block;}
    	}
    }
}
.moreShareWrap{padding: 20px 15px 0;display: flex;
     .item{display: flex;flex-direction: column;margin-right: 10px;}
     .word{color: #333;margin-top: 8px;opacity: 0.8;text-align: center;}
     .img{width: 42px;height: 42px;}    
}
.van-popup{background: rgba(255,255,255,0.8);}
#more{ .cancle{padding: 12px 0;font-size: 16px;background: #fff;text-align: center;margin-top: 20px;}}
</style>